<template>
  <div class="order">
      <h4>全部订单</h4>
      <div class="filter-box" style="padding: 30px;
            background: #fff;
            border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0">
                    <div>

                        <div class="demo-input-suffix">
                            编号：
                            <el-input clearable
                                placeholder="请输入订单编号或物流编号"
                                v-model="orderNum" class="filter-input"
                                 @keyup.enter.native="searchOrder()">
                            </el-input>
                        </div>
                        <div class="demo-input-suffix">
                            状态
                            <el-select clearable  v-model="status" placeholder="请选择状态">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="demo-input-suffix" >
                            卖家手机号：
                            <el-input clearable
                                placeholder="请输入手机号码"
                                v-model="buyerTel" class="filter-input"
                                 @keyup.enter.native="searchOrder()">
                            </el-input>
                        </div>
                        <div class="demo-input-suffix" >
                            买家手机号：
                            <el-input clearable
                                placeholder="请输入手机号码"
                                v-model="sellerTel" class="filter-input"
                                @keyup.enter.native="searchOrder()">
                            </el-input>
                        </div>
                        <div class="demo-input-suffix" style="width:350px;" >
                                    所在城市：
                                    <area-select :level="1" v-model="selected" :data="$pcaa"  style="display:inline-block"></area-select> 
                        </div>
                        <el-button type="primary" @click="searchOrder()">搜索</el-button>
                        <!-- <el-button type="danger" style="margin-left:20px;">导出（勾选）</el-button> -->
                    </div>
                    
       </div>  
       <div class="container" style="border-radius: 0 0 5px 5px ">
            <el-table v-loading="loading" :data="data" border style="width: 100%" ref="multipleTable" stripe>
                 <el-table-column type="index"  width="60" label="序号" align="center" :index="indexMethod"></el-table-column>
                 <el-table-column prop="orderId" label="订单编号" width="140" align="center"></el-table-column>
                <el-table-column prop="merchantName" label="买家" width="120" align="center"></el-table-column>
                <el-table-column prop="merchantTel" label="买家手机号" align="center"  width="120">
                </el-table-column>
                 <el-table-column prop="farmerName" label="卖家" align="center" width="120">
                </el-table-column>
                 <el-table-column prop="farmerTel" label="卖家手机号" align="center" width="120">
                </el-table-column>
                <el-table-column prop="locationCity" label="所在城市" align="center" fit>
                 </el-table-column>
                 <el-table-column prop="orderTime" label="下单时间" align="center" v-if="orderFlag==0" >
                </el-table-column>
                <el-table-column prop="transNo" label="物流编号" align="center" >
                </el-table-column>
                <el-table-column   prop="status" label="状态" align="center" :formatter="formatterStatus">
                </el-table-column>

                <el-table-column label="操作"  align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="order_detail(scope.row.id,scope.row.status)">详情</el-button>             
                </template>
                </el-table-column>
            </el-table>
             <div class="pagination">
                <el-pagination
                     @size-change="handleSizeChange"
                     @current-change="getPageNum"
                    :page-sizes="[10, 20, 50,100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page.sync="currentPage"
                    :total="total">
                 </el-pagination>
           </div>
      </div>
  </div>
</template>

<script>
import { allOrder } from '@/request/api'
import { AreaSelect} from "vue-area-linkage";
export default {
    data(){
       return {
           loading:true,
           status:'',
           info:'全部订单',
           data: [],
           orderNum:'',
           buyerTel:'',
           sellerTel:'', 
           total:0,//总条数
           pageNum:'1',//总页数
           pageSize:'10',//每页显示几条
           orderFlag:0,//订单列表里面显示0.下单时间，1.发货时间2.签收时间3.评价时间4.退款时间
           options: [{
            value: '1',
            label: '待发货'
            }, {
            value: '2',
            label: '待收货'
            }, {
            value: '3',
            label: '待评价'
            }, {
            value: '4',
            label: '已完成'
            }, {
            value: '6',
            label: '已退款'
            }],
            currentPage:0,
            selected:[],
       }
    },
    created(){
         this.get_orderList();
    },
    components:{
        AreaSelect,
    },
    methods:{
        // 将状态的数字转变成文字的形式
         formatterStatus(row,column) {
           let str;
          if(row.status == 1) {
             str = '待发货'
          }else if(row.status == 2) {
              str = '待收货'
          }else if(row.status == 3) {
              str = '待评价'
          }else if(row.status == 4) {
              str = '已完成'
          }else if(row.status == 6) {
              str = '已退款'
          }
          return str;
            
        },
        // 获取序号
       indexMethod(index) {
          // console.log(index,index + 1 + (this.pageNum -1 ) * 10)
          return  this.pageSize*(this.pageNum-1) + 1 + index;
          
       },
       // 搜索
       searchOrder(){
           console.log(1,this.status)
             this.get_orderList();
       },
       // 跳转订单详情   
       order_detail(id,status){
           console.log(3)
          this.$router.push({
               path:`/order_${status}/order_detail/${id}`
          })
       },
       //当前页
       getPageNum(currentPage){
            this.pageNum = currentPage;
            this.get_orderList();
       },
       //当前的条数
       handleSizeChange(currentPage){
          this.pageSize = currentPage;
          this.get_orderList();
       },   
       //点击查看详情    
       get_orderList(){
            allOrder({
                 pageNum:this.pageNum,
                 pageSize:this.pageSize,
                 status:this.status,
                 orderId:this.orderNum,
                 merchantTel:this.sellerTel, 
                 farmerTel:this.buyerTel,
                 cityId:this.selected[1]
            }).then(res => {
                this.loading = false;
                this.data = res.rows;
                this.total = res.total;
                this.currentPage=this.pageNum;
            })
       } 
    }
 }
</script>
<style  scoped>
.order > h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}
.handle-box {
  margin-bottom: 20px;
}



.filter-input {
  width: 200px;
  display: inline-block;
}
.demo-input-suffix{
   margin-right:20px;
   display:inline-block;
}
</style>